

<template>
    <el-row class="main">
        <el-col :span="2" v-for="(o,index) in items" :key="o.name" >
            <el-card :body-style="{ padding: '0px'}" shadow="hover">
                <div @click="part = o.part">
                    <img src="../assets/v_logo.png" class="image">
                    <label>{{o.name}}</label>
                </div>
            </el-card>
        </el-col>
        <el-col :span="1" >&nbsp;</el-col>
        <el-col :span="18">
            <div>Info</div>
            <component :is="part"></component>
        </el-col>
    </el-row>
</template>

<script>
    import Process from '@/components/apps/Process'
    import Legend from  '@/components/apps/Legend'

    export default {
        data(){
            return{
                items:[
                    {"name":"进程","part":"Process"},
                    {"name":"传奇脚本","part":"Legend"},
                ],
                part:''
            }
        },

        methods:{},
        components:{
            "Process":Process,
            "Legend":Legend,
        }
    }
</script>


<style scoped>
    img {
        width: 100%;
        height: auto;
        display: block;
    }


    .main{
        margin-left: 8%;
        margin-top: 60px;
    }

</style>